<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <style>
        table{
            border: 1px solid gray;
            border-top: none;
            line-height: 40px;
            border-spacing: 0;
        }
        th,td{
            border-bottom: 1px solid lightgray;
            padding: 5px 20px;
        }
        caption{
            border: 1px solid gray;
            font-size: 32px;
            font-weight: bolder;
            line-height: 60px;
        }
        th{
            background-color: #f0f0f0;
        }
        tr:hover td{
            background-color: lightcyan;
        }

    </style>
</head>
<body>
    <table id="tq">
        <caption>未来七天天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气预报</th>
                <th>温度</th>
                <th>风力</th>
                <th>天气等级</th>
                <th>建议</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script src="./jquery.js"></script>
<script>
        function request(option){
        var def = $.Deferred();
        if(!option || !option.url){
            throw Error('url is undefined');
        }
        var _config = {
            url: option.url,
            type:'get',
            dataType:'JSON',
            success: function(res){
                def.resolve(res);
            },
            error:function(a,b,err){
                def.reject(err);
            }
        }
        // $.extend(_config,option,true);
        $.ajax(_config);
        return def.promise();
    }

    var option = {
        url: 'http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=13955891&appsecret=K1xspFHc'
    }

    request(option).then(function(data){
        console.log(data);
        for (var d of data.data){
            var tr = document.createElement('tr');

            var td1 = document.createElement('td');            $(td1).html(d.date);  $(tr).append(td1);
            var td2 = document.createElement('td');            $(td2).html(d.wea);  $(tr).append(td2);
            var td3 = document.createElement('td');            $(td3).html('最高温度：' + d.tem1 +'℃, 最低温度：' + d.tem2 + '℃');  $(tr).append(td3);
            var td4 = document.createElement('td');            $(td4).html(d.win_speed);  $(tr).append(td4);
            var td5 = document.createElement('td');            $(td5).html(d.air_level);  $(tr).append(td5);
            var td6 = document.createElement('td');            $(td6).html(d.air_tips);  $(tr).append(td6);

            $('#tq').append(tr);
        }

    }, function(err){
        console.log(err);
    })

</script>
</html>